<template>
  <div :style="`width: calc(100% - ${labelwidth}); height: ${height}`" class="tags">
    <el-link :underline="false" icon="el-icon-d-arrow-left" @click="scrollLeft" v-if="isScrollTag"></el-link>
    <div id="elwra" ref="tagswrapper" :class="['tags-wrapper', !isScrollTag ? 'tags-wrapper-scrollX' : ''] ">
      <div id="elbox" ref="tagsbox" class="tags-wrapper-box">
        <slot></slot>
      </div>
    </div>
    <el-link :underline="false" icon="el-icon-d-arrow-right" @click="scrollRight" v-if="isScrollTag"></el-link>
  </div>
</template>

<script>
export default {
  /**
   * 标签列表左右滚动
   */
  name: 'TagsSwiper',
  data () {
    return {
      timeoutsize: null,
      isScrollTag: false,
      distance: 0,
      elwra: {},
      elbox: {}
    }
  },
  props: {
    height: {
      type: String,
      default: '30px'
    },
    // 父元素的兄弟元素的宽度总和
    labelwidth: {
      type: String,
      default: '0px'
    }
  },
  methods: {
    // 重置是否显示滚动按钮
    setTagsBoxWidth () {
      this.elbox.style.transform = `translateX(0px)`
      this.distance = 0
      this.$nextTick(() => {
        this.isScrollTag = this.elbox.clientWidth > this.elwra.clientWidth
      })
    },
    // 向右滚动
    scrollRight () {
      // let { distance } = this
      // const x = this.elwra.clientWidth
      // if (this.elbox.clientWidth - distance < x) return
      // distance += x
      // this.elbox.style.transform = `translateX(${-distance}px)`
      // this.distance = distance
      let { distance } = this
      const x = this.elwra.clientWidth
      if (this.elbox.clientWidth - distance <= x) return
      distance += (this.elbox.clientWidth - x)
      this.elbox.style.transform = `translateX(${-distance}px)`
      this.distance = distance
    },
    // 向左滚动
    scrollLeft () {
      // let { distance } = this
      // const x = this.elwra.clientWidth
      // if (distance === 0) return
      // distance -= x
      // if (distance < 0) distance = 0
      // this.elbox.style.transform = `translateX(${-distance}px)`
      // this.distance = distance
      this.elbox.style.transform = `translateX(-0px)`
      this.distance = 0
    }
  },
  created () { },
  mounted () {
    try {
      // 监听窗口尺寸变化,重置是否滚动按钮
      window.onresize = () => {
        if (this.timeoutsize) {
          clearTimeout(this.timeoutsize)
        }
        this.timeoutsize = setTimeout(() => {
          this.setTagsBoxWidth()
        }, 500)
      }
    } catch (error) {
      console.log(error)
    }
    this.$nextTick(() => {
      this.elbox = document.getElementById('elbox')
      this.elwra = document.getElementById('elwra')
      this.setTagsBoxWidth()
    })
  },
  beforeDestroy () {
    // 组件摧毁前去掉监听窗口变化事件,清空定时事件
    clearTimeout(this.timeoutsize)
    window.onresize = ''
  },
  components: {},
  watch: {
  },
  computed: {}
}
</script>

<style scoped lang="scss">
.tags {
  display: inline-flex;
  // height: 30px;
  align-items: center;
  flex-grow: 1;
  white-space: nowrap;
  &-wrapper {
    display: flex;
    flex-grow: 1;
    white-space: nowrap;
    align-items: center;
    overflow-x: hidden;
    line-height: 28px;
    margin: 0 5px;
    &-box {
      display: inline-block;
      transition: 0.5s all;
      // margin: 0 5px;
      // margin: 0 auto; // 当没有滚动得时候，居中
    }
  }
  &-wrapper-scrollX {
    justify-content: flex-end;
  }
}
</style>
